{include file='common/doc'}
<style>
    .layui-colla-title {
        background-color: #FFFFFF;
    }

    .laytable-cell-1-0-2{
        text-align:center;
        height: auto;
        white-space: normal;
    }
    .lgp-upload{
        position:absolute; left: 30%;
        display: none;
    }
    .layui-upload-drag:hover .lgp-upload{
        display: block;
    }
</style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="table_list" lay-filter="table_list"></table>
            <script type="text/html" id="op_table">
                <?php echo $operation['tool'] ?>
            </script>
            <template id="table_toolbar">
                <div class="layui-btn-group">
                    <?php echo $operation['toolbar'] ?>
                </div>
            </template>
        </div>
    </div>
</div>
<template id="form_template" style="display: none">
    <form class="layui-form"  id="form" lay-filter="form" action="" style="margin-top:10px;">
        <div class="layui-form-item">
            <label class="layui-form-label">广告名称</label>
            <div class="layui-input-inline">
                <input type="text" name="advertising_name" required lay-verify="required" lay-reqText="昵称不能为空"
                       lay-verType="tips"
                       placeholder="请输入昵称"
                       autocomplete="off" class="layui-input">
            </div>
            <!--     <div class="layui-form-mid layui-word-aux">辅助字段</div>-->
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">显示位置</label>
            <div class="layui-input-inline">
                <select name="show_location" id="">
                    <option value=""></option>
                    <option value="1">页面</option>
                    <option value="2">banner</option>
                    <option value="3">浮动</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">链接</label>
            <div class="layui-input-inline">
                <input type="text" name="advertising_link" required lay-verify="required" lay-reqText="昵称不能为空"
                       lay-verType="tips"
                       placeholder="链接地址"
                       autocomplete="off" class="layui-input">
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-upload-drag "  style="width: 200px;height: 100px;"lgp-type="file_chooser" lgp-name="advertising_img">
                <div class="lgp-upload"> <i class="layui-icon"></i>
                    <p>打开文件管理</p></div>
                <div class="container"></div>
                <input type="hidden" name="advertising_img" value="">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="hidden" name="column_id">
                <input type="checkbox" name="status" value="1" lay-skin="switch" lay-text="开启|关闭">
            </div>
            <!--     <div class="layui-form-mid layui-word-aux">辅助字段</div>-->
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="form_submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</template>
<script type="text/html" id="status">
    {{#  if(d.status == 1){ }}
    <button class="layui-btn layui-btn-xs">启用</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-primary layui-btn-xs">禁用</button>
    {{#  } }}
</script>
<script src="/layuiadmin/layui/layui.js"></script>
</body>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index' ,'table','treeSelect','upload','fileChooser','layedit'] ,function () {
        var $ = layui.$
            ,form = layui.form
            ,table = layui.table
            ,fileChoose = layui.fileChooser
            ,treeSelect = layui.treeSelect
            ,upload = layui.upload;
        var layedit = layui.layedit;

        table.render({
            elem: '#table_list'
            ,height: 'full-50'
            ,toolbar: '#table_toolbar'
            ,skin: 'line'
            ,url: 'read' //数据接口

            ,page: true //开启分页
            ,limit:20
            ,cols: [
                [ //表头
                    {type: 'checkbox'} ,
                    {type: 'numbers' }
                    ,{field: 'advertising_img' ,align: "center" ,title: '广告图片',templet:(d)=> `<img style="height:100px;width:200px" src="${d.advertising_img}" />`}
                    ,{field: 'advertising_name' ,align: "center" ,title: '广告名称'}
                    ,{field: 'advertising_link' ,align: "center" ,title: '链接'}
                    ,{field: 'show_location' ,align: "center" ,title: '显示位置',templet(d){
                        let x = [
                            '',
                            '页面',
                            'banner',
                            '浮动',
                            ];
                        return x[d.show_location];
                    }}
                    ,{field: 'status' ,align: "center" ,title:'状态',templet:'#status'}

                    ,{title: '操作' ,align: 'center' ,fixed: 'right' ,toolbar: '#op_table'}
                ]
            ]
        });
        //头工具栏事件
        table.on('toolbar(table_list)' ,function (obj) {
            let event = obj.event;
            var checkStatus = table.checkStatus(obj.config.id);
            if (event == 'add') {
                layer.open({
                    type: 1 ,
                    title: '广告添加' ,
                    area: ['1000px','500px'],
                    content: $('#form_template').html() ,
                    success: function (lay ,index) {
                        form.render();
                        fileChoose.render();
                        form.on('submit(form_submit)' ,function (obj) {
                            let status  =request({'url':'add','data':obj.field});
                            if (status){
                                layer.close(index);
                                table.reload('table_list');
                            }
                            return false;
                        });
                    }
                })
            }

        });
        table.on('tool(table_list)' ,function (obj) {
            let event = obj.event;
            console.log(event);
            if (event == 'upd') {
                layer.open({
                    type: 1 ,
                    title: '用户编辑' ,
                    area: ['1000px','500px'],
                    content: $('#form_template').html() ,
                    success: function (lay ,index) {
                        form.render();
                        fileChoose.render();
                        form.val('form' ,obj.data);
                        form.on('submit(form_submit)' ,function (res) {
                            res.field['advertising_id'] = obj.data['advertising_id'];
                            let status = request({'url':'upd','data':res.field});
                            if (status){
                                layer.close(index);
                                table.reload('table_list');
                            }
                            return false;
                        });
                    }
                })
            }
            if (event == 'del') {
                $.post('del' ,obj.field ,function (res) {
                    obj.del();
                    layer.msg(res.msg);
                });
            }
        });

    });
</script>
</html>

